<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
console.log('1, 2, 3')
console.log('4, 5, 6')
console.log('7, 8, 9')

let arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
]

console.log('arr:', arr)

function clockwise (arr) {
    let direction = 0
    let currentWidth = arr.length
    let currentMinWidth = 0
    let currentHeight = arr[0].length
    let currentMinHeight = 0
    let maxLength = currentWidth * currentHeight

    let nowWidth = 0
    let nowHeight = 0

    for (let i = 0; i < maxLength; i++) {
        // console.log('nowHeight:', nowHeight)
        // console.log('nowWidth:', nowWidth)
        console.log(arr[nowHeight][nowWidth])
        // console.log('direction:', direction)
        console.log('>>>>>>>>>>>>>>>>>>>>>>:')
        switch (direction) {
            case 0: 
                nowWidth++
                if (nowWidth >= currentWidth - 1) {
                    direction = 1
                    currentMinHeight++
                }
                break;
            case 1: 
                nowHeight++
                if (nowHeight >= currentHeight - 1) {
                    direction = 2
                    currentWidth--
                }
                break
            case 2: 
                nowWidth--
                if (nowWidth <= currentMinWidth) {
                    direction = 3
                    currentHeight--
                }
                break
            case 3:
                nowHeight--
                if (nowHeight <= currentHeight) {
                    direction = 0
                    currentMinWidth++
                }
                break
        }
    }
}
clockwise(arr)
</script>
</body>
</html>